<template>
    <div class="hello">
        <el-dialog title="编辑学生信息" v-model="dialogVisble" width="30%" :before-close="close">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="学生姓名">
                    <el-input v-model="altstulist.aname"></el-input>
                </el-form-item>
                <el-form-item label="学生专业">
                    <el-select class="form-control" v-model="altstulist.aclass">
                        <el-option value="-请选择专业-">-请选择专业-</el-option>
                        <el-option value="移动应用开发">移动应用开发</el-option>
                        <el-option value="软件开发">软件开发</el-option>
                        <el-option value="计算机网络">计算机网络</el-option>
                        <el-option value="数字媒体">数字媒体</el-option>
                        <el-option value="信息安全管理">信息安全管理</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入学时间">
                    <el-input v-model="altstulist.adate"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="close">取 消</el-button>
                    <el-button type="primary" @click="confirm">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
<script>
import { ref, watch, reactive, defineEmits, inject } from 'vue'

export default {
    data() {
        return {

        }
    },
    methods: {

    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        //父组件中传来的初始化修改数据
        altlist: {
            type: Array,
            default: function () {
                return []
            }
        }
    },

    setup(props, ctx) {

        const dialogVisble = ref(false);
        //修改学生信息
        const altstulist = reactive({
            aid: '',//学生id
            aname: '',//学生姓名
            aclass: '',//学生专业
            adate: '',//入校日期
        });
        //孙子传爷
        const sendGrandson = inject('sendHandle');

        //取消按钮
        const close = () => {
            ctx.emit("update:visible", false);
        };
        //确定按钮
        const confirm = () => {
            // console.log('你点击了确定按钮')
            ctx.emit("update:visible", false);
            sendGrandson(altstulist)
        };

        watch(() => props.visible, (val) => {
            dialogVisble.value = val
        });
        //监听props传过来的altlist
        watch(props.altlist, (newProps) => {
            // console.log("监听到" + newProps);//查看新值
            altstulist.aid = newProps.initid
            altstulist.aname = newProps.initname
            altstulist.aclass = newProps.initclass
            altstulist.adate = newProps.initdate
        });

        return {
            altstulist,
            dialogVisble,
            confirm,
            close
        }
    }
}
</script>